<script setup lang="ts">
import { ref } from "vue";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    type: 1,
    title: "",
    logo: "",
    des: "",
    content: "",
    zt: 0,
    noticetime: "",
    orderby: 0,
    addtime: "",
    updatetime: ""
  })
});
const newFormInline = ref(props.formInline);
</script>
<template>
  <el-card>
    <div class="news-container">
      <h1 class="news-title">{{ newFormInline.title }}</h1>
      <h4 class="news-time">发布时间：{{ newFormInline.noticetime }}</h4>
      <el-image
        class="news-image"
        :src="newFormInline.logo"
        :alt="newFormInline.logo"
        fit="contain"
        style="width: 300px; height: 300px"
        v-if="newFormInline.logo != ''"
      />
      <div class="news-content" v-html="newFormInline.content" />
    </div>
  </el-card>
</template>
<style scoped lang="scss">
.news-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.news-title {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
}

.news-time {
  margin-bottom: 20px;
  font-size: 12px;
  color: #999;
}

.news-image {
  width: 100%;
  height: auto;
}

.news-content {
  font-size: 16px;
  line-height: 1.5;
}
</style>
